<template>
  <div class="wrap">
    <el-dialog class="add-dialog" title="新增担保类型" :visible.sync="addDialog.showDialog" width="50%">
      <div class="input-row">
        <span class="item-desc">担保类型代码：</span>
        <el-input class="code" v-model="addDialog.code" placeholder="代码"></el-input>
      </div>
      <div class="input-row">
        <span class="item-desc">担保类型名称：</span>
        <el-input class="name" v-model="addDialog.name" placeholder="名称"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialog.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog class="edit-dialog" title="修改担保类型" :visible.sync="editDialog.showDialog" width="50%">
      <div class="input-row">
        <span class="item-desc">担保类型代码：</span>
        <el-input class="code" v-model="editDialog.code" placeholder="代码"></el-input>
      </div>
      <div class="input-row">
        <span class="item-desc">担保类型名称：</span>
        <el-input class="name" v-model="editDialog.name" placeholder="名称"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog.showDialog = false">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </span>
    </el-dialog>

    <div class="button-row">
      <el-button type="primary" @click="showAddDialog">新增</el-button>
    </div>
    <el-table :data="list" style="width: 100%">
      <el-table-column label="序号" width="80" prop="index" />
      <el-table-column label="代码" width="80" prop="code" />
      <el-table-column label="名称" width="280" prop="name" />
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
import {
  getGuaranteeList,
  addGuarantee,
  updateGuarantee,
  deleteGuarantee
} from "@/api/first-loan-guarantee.js";
import { Table, TableColumn, Button, Dialog, Input } from "element-ui";
export default {
  name: "first-loan-guarantee",
  components: {
    [Table.name]: Table,
    [TableColumn.name]: TableColumn,
    [Button.name]: Button,
    [Dialog.name]: Dialog,
    [Input.name]: Input
  },
  data() {
    return {
      list: [],
      addDialog: {
        showDialog: false,
        code: null,
        name: null
      },
      editDialog: {
        showDialog: false,
        id: null,
        code: null,
        name: null
      }
    };
  },
  mounted() {
    this.refreshList();
  },
  methods: {
    refreshList() {
      getGuaranteeList()
        .then(res => {
          this.list = res;
          this.list.forEach((item, index) => {
            item.index = index + 1;
          });
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    handleEdit(index, row) {
      this.editDialog.id = row.id;
      this.editDialog.code = row.code;
      this.editDialog.name = row.name;
      this.editDialog.showDialog = true;
    },
    handleDelete(index, row) {
      this.$confirm("此操作将永久删除该担保方式, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteGuarantee(row.id)
            .then(res => this.refreshList())
            .catch(errMsg => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    },
    submitAdd() {
      addGuarantee({
        code: this.addDialog.code,
        name: this.addDialog.name
      })
        .then(res => {
          this.refreshList();
          this.addDialog.showDialog = false;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    submitEdit() {
      updateGuarantee({
        id: this.editDialog.id,
        code: this.editDialog.code,
        name: this.editDialog.name
      })
        .then(res => {
          this.refreshList();
          this.editDialog.showDialog = false;
        })
        .catch(errMsg => this.$alert(errMsg.msg));
    },
    showAddDialog() {
      this.addDialog.showDialog = true;
      this.addDialog.code = null;
      this.addDialog.name = null;
    }
  }
};
</script>
<style lang="stylus" scoped>
.wrap {
  padding-left: 5px;
  padding-top: 5px;

  .add-dialog, .edit-dialog {
    .input-row {
      margin-bottom: 5px;

      .item-desc {
        position: absolute;
        line-height: 40px;
        width: 100px;
      }

      .code {
        width: 200px;
        padding-left: 100px;
      }

      .name {
        width: 200px;
        padding-left: 100px;
      }
    }
  }
}
</style>